import React, { useState } from 'react';
import { printerApi } from '../services/printerApi';
import './AddPrinterDialog.css';

interface ScanPrinterDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onScanComplete: (printers: any[]) => void;
}

const ScanPrinterDialog: React.FC<ScanPrinterDialogProps> = ({ isOpen, onClose, onScanComplete }) => {
  const [startIP, setStartIP] = useState('10.10.185.1');
  const [endIP, setEndIP] = useState('10.10.185.254');
  const [scanning, setScanning] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [progress, setProgress] = useState(0);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setScanning(true);
    setError(null);
    setProgress(0);

    try {
      const result = await printerApi.scanPrinters(startIP, endIP);
      onScanComplete(result.printers);
      onClose();
    } catch (err) {
      console.error('扫描失败:', err);
      setError('扫描失败，请检查IP范围是否正确');
    } finally {
      setScanning(false);
    }
  };

  if (!isOpen) return null;

  return (
    <div className="dialog-overlay">
      <div className="dialog-content">
        <h2>扫描局域网打印机</h2>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="startIP">起始IP地址</label>
            <input
              type="text"
              id="startIP"
              value={startIP}
              onChange={(e) => setStartIP(e.target.value)}
              required
              pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$"
              placeholder="例如: 192.168.1.1"
            />
          </div>
          
          <div className="form-group">
            <label htmlFor="endIP">结束IP地址</label>
            <input
              type="text"
              id="endIP"
              value={endIP}
              onChange={(e) => setEndIP(e.target.value)}
              required
              pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$"
              placeholder="例如: 192.168.1.254"
            />
          </div>

          {error && (
            <div className="error-message">
              {error}
            </div>
          )}

          {scanning && (
            <div className="scanning-progress">
              <div className="progress-bar">
                <div 
                  className="progress-fill"
                  style={{ width: `${progress}%` }}
                />
              </div>
              <div className="progress-text">
                正在扫描... {progress}%
              </div>
            </div>
          )}

          <div className="dialog-actions">
            <button type="button" className="btn btn-secondary" onClick={onClose}>
              取消
            </button>
            <button 
              type="submit" 
              className="btn btn-primary"
              disabled={scanning}
            >
              {scanning ? '扫描中...' : '开始扫描'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default ScanPrinterDialog; 